как диву присвоить высоту другого дава?

kich · October 27, 2009

Знаю что на чистом CSS это почти невозможно, так как у меня два дива внутри другого, и один из них float, а вот как это сделать хотя бы через JS?

mishka · October 27, 2009

посмотри пример, может подойдет

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>sameHeight</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
	<!--
	body{
		margin:0;
	}
	.box{
		float:left;
		width:30%;
		padding:0 10px;
	}
	.element{
		float:left;
		padding:0 10px;
	}
	.holder{
		width:100%;
		overflow:hidden;
	}
	-->
	</style>
	<script type="text/javascript">
	<!--
	function initScript(){
		startSameHeight();
		window.onresize=function(){startSameHeight()};
	}
	function startSameHeight(){
		sameHeight({
			tagName:'div',
			tagClass:'box'
		});
		sameHeight({
			tagName:'span',
			tagClass:'element'
		});
	}

	function sameHeight(_options){
		var _tagName=_options.tagName;
		var _tagClass=_options.tagClass;
		var maxHeight=0;
		var _elements=document.getElementsByTagName(_tagName)
		var re=eval('/'+_tagClass+'\\'+'b/');

		if(_elements){
			for(var i=0;i<_elements.length;i++){
				if(re.test(_elements[i].className)){
					_elements[i].style.height='auto';
					if(_elements[i].offsetHeight>=maxHeight){
						maxHeight=_elements[i].offsetHeight;
					}
				}
			}
			for(var i=0;i<_elements.length;i++){
				if(re.test(_elements[i].className)){
					_elements[i].style.height=maxHeight+'px';
				}
			}
		}
	}

	if(window.addEventListener){
		window.addEventListener("load",initScript,false);
	}else if(window.attachEvent){
		window.attachEvent("onload",initScript);
	}
	//-->
	</script>
</head>
<body>
	<div class="holder">
		<div class="box" style="background:#c33">
			<p>Lorem ipsum dolor sit amet consectetuer sem tempus tortor hac nunc. Orci Sed dolor parturient In eget parturient sit Nullam ante elit. Non nec Nam tincidunt augue.</p>
		</div>
		<div class="box" style="background:#33c">
			<p>Lorem ipsum dolor sit amet consectetuer nulla vel tincidunt urna semper. Vestibulum turpis tincidunt gravida eros vel Phasellus nunc sodales tempor dictumst. Nec nec id.</p>
			<p>Ridiculus est Maecenas Phasellus est In sed augue Suspendisse ante ac. Nulla volutpat Vestibulum Vestibulum odio id ullamcorper non dignissim tellus justo. Ut sed.</p>
		</div>
		<div class="box" style="background:#3c3">
			<p>Lorem ipsum dolor sit amet consectetuer et Vestibulum ac nibh eu. Phasellus.</p>
			<p>Tincidunt Curabitur Vestibulum semper enim Cras ut laoreet Nulla mattis Integer. Magna laoreet eu libero pellentesque morbi ut euismod at neque sed. Leo vel tellus et.</p>
		</div>
	</div>
	<div class="holder">
		<span class="element" style="background:#e31ed7">
			span
		</span>
		<span class="element" style="background:#0c8eff">
			span<br /><br />span
		</span>
	</div>
</body>
</html>

psywalker · October 27, 2009

Или может быть это? http://psywalker.ru/Forum/Column_height/main2.html

kich · October 27, 2009

document.getElementById("r_box").style.height = document.getElementById("box").offsetHeight;

решил проблему через вышеуказанное, но появилась другая проблема. ID соизмеримых дивов, находящихся, к примеру в боксе all_box, совпадают с дивами, находящимися в другом аналогичном их боксе, к примеру all_box2. А эти общие контейнеры (all_box и all_box2) имеют разные вершины.

Как быть?

mishka · October 27, 2009

Да я же тебе рабочий пример дал, который через классы работает. И дает высоту блокам с одинаковым классом по самому высокому из них.

А в этом случае:

document.getElementById("r_box").style.height = document.getElementById("box").offsetHeight;

во-первых работает через айдишник.

во-вторых если содержимое r_box будет выше чем box, то всеравно блоку r_box присвоется высота блока box и содержимое в блоке r_box обрежется, или же некрасиво вылезет.

держи еще раз, если что не так - то говори.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>sameHeight</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
	<!--
	body{
		margin:0;
		font:16px/18px Verdana,Tahoma,sans-serif;
	}
	.holder{
		width:100%;
		overflow:hidden;
		margin:10px 0 0;
	}
	.sidebar{
		float:left;
		width:200px;
		padding:0 10px;
		background:#ccc;
		_margin:0 -3px 0 0;
	}
	.content{
		overflow:hidden;
		padding:0 10px;
		background:#eee;
		_zoom:1;
	}
	p{
		margin:10px 0;
	}
	-->
	</style>
	<script type="text/javascript">
	<!--
	function initScript(){
		startSameHeight();
		window.onresize=function(){startSameHeight()};
	}
	function startSameHeight(){
		sameHeight({
			tagName:'div',
			tagClass:'block'
		});
		sameHeight({
			tagName:'div',
			tagClass:'block2'
		});
	}

	function sameHeight(_options){
		var _tagName=_options.tagName;
		var _tagClass=_options.tagClass;
		var maxHeight=0;
		var _elements=document.getElementsByTagName(_tagName)
		var re=eval('/'+_tagClass+'\\'+'b/');

		if(_elements){
			for(var i=0;i<_elements.length;i++){
				if(re.test(_elements[i].className)){
					_elements[i].style.height='auto';
					if(_elements[i].offsetHeight>=maxHeight){
						maxHeight=_elements[i].offsetHeight;
					}
				}
			}
			for(var i=0;i<_elements.length;i++){
				if(re.test(_elements[i].className)){
					_elements[i].style.height=maxHeight+'px';
				}
			}
		}
	}

	if(window.addEventListener){
		window.addEventListener("load",initScript,false);
	}else if(window.attachEvent){
		window.attachEvent("onload",initScript);
	}
	//-->
	</script>
</head>
<body>
	<div class="holder">
		<div class="sidebar block">
			<p>sidebar</p>
		</div>
		<div class="content block">
			<p>Lorem ipsum dolor sit amet consectetuer nulla vel tincidunt urna semper. Vestibulum turpis tincidunt gravida eros vel Phasellus nunc sodales tempor dictumst. Nec nec id.</p>
			<p>Ridiculus est Maecenas Phasellus est In sed augue Suspendisse ante ac. Nulla volutpat Vestibulum Vestibulum odio id ullamcorper non dignissim tellus justo. Ut sed.</p>
		</div>
	</div>
	<div class="holder">
		<div class="sidebar block2">
			<p>sidebar</p>
		</div>
		<div class="content block2">
			<p>Lorem ipsum dolor sit amet consectetuer Curabitur at sagittis felis lacinia. </p>
			<p>Nibh tellus semper In semper sapien rutrum mus est dolor aliquet. Tellus vitae nibh faucibus augue Curabitur vestibulum amet elit.</p>
			<p>Sed non tellus Nunc Morbi tempus Curabitur tempus dui nibh a. Pellentesque Nullam semper vitae volutpat ut adipiscing lobortis.</p>
			<p>Ridiculus est Maecenas Phasellus est In sed augue Suspendisse ante ac. Nulla volutpat Vestibulum Vestibulum odio id ullamcorper non dignissim tellus justo. Ut sed.</p>
		</div>
	</div>
</body>
</html>

Edited October 27, 2009 by mishka2

kich · October 27, 2009

Да я же тебе рабочий пример дал, который через классы работает. И дает высоту блокам с одинаковым классом по самому высокому из них.
А в этом случае:
document.getElementById("r_box").style.height = document.getElementById("box").offsetHeight;
во-первых работает через айдишник.
во-вторых если содержимое r_box будет выше чем box, то всеравно блоку r_box присвоется высота блока box и содержимое в блоке r_box обрежется, или же некрасиво вылезет.
держи еще раз, если что не так - то говори.

Огромное вам спасибо, правда, проблема уже решена, через

document.getElementById("parent1").getElementsByTagName('div')[0].style.height

где родительские эл-ты будут записаны в массив

Sign In

как диву присвоить высоту другого дава?

Question

kich

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

mishka

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

kich

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

kich

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information